<template>
  <div class="box">
    <topLogin :isIndex="false"></topLogin>
    <topNav :isActive="2"></topNav>
    <div class="wid-1200 min-height">
      <Breadcrumb separator=">">
        <BreadcrumbItem>当前位置</BreadcrumbItem>
        <BreadcrumbItem to="/picture">图说景区</BreadcrumbItem>
        <BreadcrumbItem>列表</BreadcrumbItem>
      </Breadcrumb>
      <!-- 片区景点 -->
      <div v-show="type==0">
        <div class="title-box">
          <p>片区景点</p>
        </div>
        <div class="picture-tab">
          <Tabs>
            <TabPane v-for="(item,index) in scenicList" :key="index" :label="item.title">
              <ImageList :ImageList="item.list"></ImageList>
            </TabPane>
          </Tabs>
        </div>
      </div>
      <!-- 特色景点 和  展馆介绍  展示形式一样-->
      <div v-show="type==1">
        <div class="title-box">
          <p>特色景点</p>
        </div>
        <ImageText :ImageText="list"></ImageText>
      </div>
      <div v-show="type==2">
        <div class="title-box">
          <p>特色景点</p>
        </div>
        <ImageText :ImageText="list"></ImageText>
      </div>
      <!-- <div class="page-box">
        <Page :total="100" show-elevator />
      </div> -->
    </div>
    <footNav></footNav>
  </div>
</template>

<script>
// 临时图片
import picture1 from "@/assets/temporary/picture1.png";
import picture2 from "@/assets/temporary/picture2.png";
import picture3 from "@/assets/temporary/picture3.png";
import picture4 from "@/assets/temporary/picture4.png";
// 自定义组件
import topLogin from "@/components/topLogin/index";
import topNav from "@/components/topNav/index";
import footNav from "@/components/footNav/index";
import ImageText from "@/components/imageText/index";
import ImageList from "@/components/imageList/index";
// 框架组件
import { Breadcrumb, BreadcrumbItem, Tabs, TabPane } from "view-design";
export default {
  name: "pictureList",
  components: {
    topLogin,
    topNav,
    footNav,
    ImageText,
    ImageList,
    Breadcrumb, 
    BreadcrumbItem, 
    Tabs, 
    TabPane,
  //  [Page.name]:Page
  },
  mounted(){
      this.type=this.$route.query.type
  },
  data() {
    return {
        type:0,// 0 文字再图片上  1,2上图下文
      scenicList: [
        {
          title: "森林乐谷区",
          list: [
            { src: picture1, title: "论优美公园,我只服朝阳!" },
            { src: picture2, title: "河长的河流一般都是这样的" },
            { src: picture3, title: "论优美公园,我只服朝阳!" },
            { src: picture4, title: "河长的河流一般都是这样的" },
             { src: picture1, title: "论优美公园,我只服朝阳!" },
            { src: picture2, title: "河长的河流一般都是这样的" },
            { src: picture3, title: "论优美公园,我只服朝阳!" },
            { src: picture4, title: "河长的河流一般都是这样的" },
             { src: picture1, title: "论优美公园,我只服朝阳!" },
            { src: picture2, title: "河长的河流一般都是这样的" },
            { src: picture3, title: "论优美公园,我只服朝阳!" },
            { src: picture4, title: "河长的河流一般都是这样的" }
            
          ]
        },
        {
          title: "梯田湿地区",
          list: [
            { src: picture1, title: "论优美公园,我只服朝阳!" },
            { src: picture2, title: "河长的河流一般都是这样的" },
            { src: picture3, title: "论优美公园,我只服朝阳!" },
            { src: picture4, title: "河长的河流一般都是这样的" },
            { src: picture1, title: "论优美公园,我只服朝阳!" },
            { src: picture2, title: "河长的河流一般都是这样的" },
            { src: picture3, title: "论优美公园,我只服朝阳!" },
            { src: picture4, title: "河长的河流一般都是这样的" },
            { src: picture1, title: "论优美公园,我只服朝阳!" },
            { src: picture2, title: "河长的河流一般都是这样的" },
            { src: picture3, title: "论优美公园,我只服朝阳!" },
            { src: picture4, title: "河长的河流一般都是这样的" }
           
          ]
        },
        {
          title: "花田草甸区",
          list: [
            { src: picture1, title: "论优美公园,我只服朝阳!" },
            { src: picture2, title: "河长的河流一般都是这样的" },
            { src: picture3, title: "论优美公园,我只服朝阳!" },
            { src: picture4, title: "河长的河流一般都是这样的" },
            { src: picture1, title: "论优美公园,我只服朝阳!" },
            { src: picture2, title: "河长的河流一般都是这样的" },
            { src: picture3, title: "论优美公园,我只服朝阳!" },
            { src: picture4, title: "河长的河流一般都是这样的" },
            { src: picture1, title: "论优美公园,我只服朝阳!" },
            { src: picture2, title: "河长的河流一般都是这样的" },
            { src: picture3, title: "论优美公园,我只服朝阳!" },
            { src: picture4, title: "河长的河流一般都是这样的" }
          ]
        },
        {
          title: "活力东湖区",
          list: [
            { src: picture1, title: "论优美公园,我只服朝阳!" },
            { src: picture2, title: "河长的河流一般都是这样的" },
            { src: picture3, title: "论优美公园,我只服朝阳!" },
            { src: picture4, title: "河长的河流一般都是这样的" },
            { src: picture1, title: "论优美公园,我只服朝阳!" },
            { src: picture2, title: "河长的河流一般都是这样的" },
            { src: picture3, title: "论优美公园,我只服朝阳!" },
            { src: picture4, title: "河长的河流一般都是这样的" },
            { src: picture1, title: "论优美公园,我只服朝阳!" },
            { src: picture2, title: "河长的河流一般都是这样的" },
            { src: picture3, title: "论优美公园,我只服朝阳!" },
            { src: picture4, title: "河长的河流一般都是这样的" }
          ]
        }
      ],
      list: [
        {
          src: picture1,
          title: "论优美公园,我只服朝阳!",
          content: "附近还有海鶄落湿地公园,未来科技城滨水森林公园,温榆河"
        },
        {
          src: picture2,
          title: "河长的河流一般都是这样的",
          content: "附近还有海鶄落湿地公园,未来科技城滨水森林公园,温榆河"
        },
        {
          src: picture3,
          title: "论优美公园,我只服朝阳!",
          content: "附近还有海鶄落湿地公园,未来科技城滨水森林公园,温榆河"
        },
        {
          src: picture4,
          title: "河长的河流一般都是这样的",
          content: "附近还有海鶄落湿地公园,未来科技城滨水森林公园,温榆河"
        },
        {
          src: picture1,
          title: "论优美公园,我只服朝阳!",
          content: "附近还有海鶄落湿地公园,未来科技城滨水森林公园,温榆河"
        },
        {
          src: picture2,
          title: "河长的河流一般都是这样的",
          content: "附近还有海鶄落湿地公园,未来科技城滨水森林公园,温榆河"
        },
        {
          src: picture3,
          title: "论优美公园,我只服朝阳!",
          content: "附近还有海鶄落湿地公园,未来科技城滨水森林公园,温榆河"
        },
        {
          src: picture4,
          title: "河长的河流一般都是这样的",
          content: "附近还有海鶄落湿地公园,未来科技城滨水森林公园,温榆河"
        },
        {
          src: picture1,
          title: "论优美公园,我只服朝阳!",
          content: "附近还有海鶄落湿地公园,未来科技城滨水森林公园,温榆河"
        },
        {
          src: picture2,
          title: "河长的河流一般都是这样的",
          content: "附近还有海鶄落湿地公园,未来科技城滨水森林公园,温榆河"
        },
        {
          src: picture3,
          title: "论优美公园,我只服朝阳!",
          content: "附近还有海鶄落湿地公园,未来科技城滨水森林公园,温榆河"
        },
        {
          src: picture4,
          title: "河长的河流一般都是这样的",
          content: "附近还有海鶄落湿地公园,未来科技城滨水森林公园,温榆河"
        }
      ]
    };
  }
};
</script>

<style>
</style>